<template>
    <div class="page-container">
        <el-row>
            <el-card class="tl-card" shadow="hover" :body-style="{padding: '15px', height: '100%'}">
                <el-row>
                    <el-col :span="8">订单阶段</el-col>
                    <el-col :span="8">待审批</el-col>
                    <el-col :span="8">待签署</el-col>
                </el-row>
                <el-row v-for="item in stageData" :key="item.id" justify="center">
                    <el-col :span="8">{{ item.label }}</el-col>
                    <el-col :span="8" :class="params.approveState == 0 && item.id == params.dateType ? 'selected-color' : ''" style="cursor: pointer" @click="stageNumSelect(item, 0)">{{ item.approveNum }}</el-col>
                    <el-col :span="8" :class="params.approveState == 1 && item.id == params.dateType ? 'selected-color' : ''" style="cursor: pointer" @click="stageNumSelect(item, 1)">{{ item.signNum }}</el-col>
                </el-row>
            </el-card>
            <el-card class="tr-card" shadow="hover" :body-style="{padding: '15px', height: '100%'}">
                <el-row>
                    <el-col :span="6">昨日新增订单数</el-col>
                    <el-col :span="6">今日新增订单数</el-col>
                    <el-col :span="6">本月订单总数</el-col>
                    <el-col :span="6">本月退款订单数</el-col>
                </el-row>
                <el-row>
                    <el-col :span="6">{{ topOrderData.yesterdayNum }}</el-col>
                    <el-col :span="6">{{ topOrderData.todayNum }}</el-col>
                    <el-col :span="6">{{ topOrderData.monthNum }}</el-col>
                    <el-col :span="6">{{ topOrderData.monthRefundNum }}</el-col>
                </el-row>
                <el-row>
                    <el-col :span="6">昨日新增订单金额</el-col>
                    <el-col :span="6">今日新增订单金额</el-col>
                    <el-col :span="6">本月订单总金额</el-col>
                    <el-col :span="6">本月退款金额</el-col>
                </el-row>
                <el-row>
                    <el-col :span="6">{{ topOrderData.yesterdayAmount }}</el-col>
                    <el-col :span="6">{{ topOrderData.todayAmount }}</el-col>
                    <el-col :span="6">{{ topOrderData.monthAmount }}</el-col>
                    <el-col :span="6">{{ topOrderData.monthRefundAmount }}</el-col>
                </el-row>
            </el-card>
        </el-row>

        <el-row style="margin: 5px 0" justify="space-between">
            <el-row>
                <el-button type="primary" size="small" @click="resetParams">全部订单</el-button>
                <el-button type="primary" size="small" icon="ele-Plus" @click="createVisible = 'PURCHASE_ORDER'">新建订单</el-button>
                <el-button type="primary" size="small">店面单核销</el-button>
                <el-col :span="2">
                    <el-date-picker
                        v-model="params.searchDate"
                        type="daterange"
                        range-separator=" 至 "
                        start-placeholder="开始日期"
                        end-placeholder="结束日期"
                        size="small"
                        style="margin-left: 20px"
                    />
                </el-col>
            </el-row>
            <el-row>
                <el-button size="small" type="warning" plain @click="openDraft">草稿箱</el-button>
                <el-button type="default" size="small" @click="headerVisible = true">表头设置</el-button>
            </el-row>
        </el-row>


        <div class="table-box" v-show="header.length > 0">
            <el-table class="table-list" size="small" :data="tableData" stripe border :cell-style="{textAlign: 'center'}" :header-cell-style="{textAlign: 'center'}">
                <el-table-column
                    v-for="item in header"
                    :key="item.label"
                    :prop="item.label"
                    :min-width="item.width"
                    :class-name="item.label !== 'productName' ? '' : 'order-goods'">
                    <template #header>
                        <span v-if="item.label !== 'productName'" style="margin-right:2px;">{{ item.name }}</span>
                        <el-row v-else class="order-row-item order-border-none">
                            <el-col :span="6">产品名称</el-col>
                            <el-col :span="6">详情规格</el-col>
                            <el-col :span="4">数量</el-col>
                            <el-col :span="4">单价(元)</el-col>
                            <el-col :span="4">小计(元)</el-col>
                        </el-row>
                        <!-- 可搜索表头 -->
                        <el-popover placement="bottom" :width="200" trigger="click" v-if="item.isFilter && item.filter == 'search'">
                            <template #reference>
                                <el-icon :size="15" :color="params[item.label] != null ? 'var(--el-color-warning)' : 'var(--el-color-primary)'">
                                    <ele-Search/>
                                </el-icon>
                            </template>
                            <el-input :placeholder="`请输入${item.name}`" v-model.trim="params[item.label]" size="small" clearable @input="getTableData"/>
                        </el-popover>
                        <!-- 可筛选表头 -->
                        <el-popover placement="bottom" :width="120" trigger="click" v-if="item.isFilter && item.filter == 'filter'">
                            <template #reference>
                                <el-icon :size="15" :color="params[item.label] != null ? 'var(--el-color-warning)' : 'var(--el-color-primary)'">
                                    <ele-Filter/>
                                </el-icon>
                            </template>
                            <el-scrollbar max-height="600px">
                                <el-radio-group v-model="params[item.label]" size="small" v-if="filterData[item.label] && filterData[item.label].length > 0">
                                    <el-radio v-for="radio in filterData[item.label]" :key="radio.name" :label="radio.value" @click.prevent="radioChange(radio.value, item.label)">{{ radio.name }}
                                    </el-radio>
                                </el-radio-group>
                                <el-empty style="padding: 0;font-size:12px;" v-else :image-size="50" description="无数据"/>
                            </el-scrollbar>
                        </el-popover>
                    </template>

                    <template v-slot="{row}">
                        <!-- 采购单号 -->
                        <div v-if="item.label === 'orderNo'" class="primary" @click="openDetail(row)">{{ row.orderNo }}</div>
                        <!-- 产品名称 -->
                        <div v-else-if="item.label === 'productName'" style="flex:1;display:flex;flex-direction: column;">
                            <div v-for="(product, index) in row.productItems" :key="product.id" style="flex: 1;height:100%">
                                <el-row class="order-row-item" style="height:100%">
                                    <el-col :span="6">{{ product.name }}</el-col>
                                    <el-col :span="6">{{ product.specification }}</el-col>
                                    <el-col :span="4">{{ product.num }}</el-col>
                                    <el-col :span="4">{{ product.price.toFixed(2) }}</el-col>
                                    <el-col :span="4">{{ product.total.toFixed(2) }}</el-col>
                                </el-row>
                                <el-divider style="margin: 0 -8px;width:calc(100% + 16px);border-color:var(--el-border-color-light)" v-if="index < row.productItems.length - 1"/>
                            </div>
                        </div>
                        <!--                        <div v-else-if="item.label === 'type'">{{ row.type == 0 ? '个人' : '企业' }}</div>-->
                        <div v-else-if="'source stage paymentType'.includes(item.label)">
                            <div v-for="dict in filterData[item.label]" v-show="dict.value == row[item.label]">{{ dict.name }}</div>
                        </div>
                        <div v-else>{{ row[item.label] }}</div>
                    </template>
                </el-table-column>
                <el-table-column label="操作" fixed="right" width="130">
                    <template v-slot="{row}">
                        <el-button size="small" type="primary" link @click="openEdit(row)">审批</el-button>
                        <el-button size="small" type="primary" link @click="validOrder(row)">订单生效</el-button>
                        <el-button size="small" type="primary" link @click="cancelOrder(row)">订单取消</el-button>
                    </template>
                </el-table-column>
                <el-table-column label="发送方式" width="90" fixed="right">
                    <template v-slot="{row}">
                        <el-button size="small" type="primary" link @click="openSign(row)">签署/确认</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <el-row style="margin: 5px">
                <el-col :span="2">Σ本页</el-col>
                <el-col :span="6">￥ {{ formatThousand(currentPageAmount, 2) }}</el-col>
            </el-row>
            <el-row style="margin: 0 5px">
                <el-col :span="2">Σ全部</el-col>
                <el-col :span="6">￥ {{ formatThousand(totalAmount, 2) }}</el-col>
            </el-row>
        </div>

        <div class="page-block">
            <el-pagination v-model:currentPage="params.current" v-model:page-size="params.size" :page-sizes="[10, 30, 50, 70, 100]" :small="true" :disabled="false" :background="false" layout="total, sizes, prev, pager, next, jumper" :total="total" :hide-on-single-page="true" @size-change="sizeChange" @current-change="getTableData"/>
        </div>

        <!-- 草稿箱弹窗 -->
        <el-dialog title="草稿箱" v-model="draftVisible" destroy-on-close width="55%" @close="draftVisible = false" top="5vh">
            <el-table class="table-box" size="small" :data="draftList" stripe border :cell-style="{textAlign: 'center'}"
                      :header-cell-style="{textAlign: 'center', background: 'var(--el-color-primary-light-9)', color: 'var(--next-bg-menuBar-light-1)'}">
                <el-table-column label="订单号/合同编号" prop="orderNo" width="200"/>
                <el-table-column label="供应商简称" prop="shortName" width="180"/>
                <el-table-column label="产品清单" width="260">
                    <template v-slot="{row}">
                        <span v-if="row.productItems" v-for="(item, i) in row.productItems" :key="item.id">{{ item.name + (i < row.productItems.length - 1 ? '，' : '') }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="总金额（元）" prop="productAmountSum" width="140"/>
                <el-table-column label="操作">
                    <template v-slot="{row}">
                        <el-button size="small" text type="primary" icon="ele-Edit" @click="openEdit(row)">编辑</el-button>
                        <el-button size="small" text type="danger" icon="ele-Delete" @click="deleteDraft(row)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <div class="page-block">
                <el-pagination v-model:currentPage="draftParams.current" v-model:page-size="draftParams.size" :page-sizes="[10, 30, 50, 70, 100]"
                               :small="true" :disabled="false" :background="false" layout="total, sizes, prev, pager, next, jumper"
                               :total="draftTotal" :hide-on-single-page="true" @size-change="draftSizeChange"
                               @current-change="getDraftData"/>
            </div>
            <template #footer>
                <el-button size="small" @click="draftVisible = false">关闭</el-button>
            </template>
        </el-dialog>

        <!-- 表头设置对话框 -->
        <el-dialog title="表头设置" v-model="headerVisible" destroy-on-close width="40%" @close="headerVisible = false" @opened="dialogOpened" top="5vh">
            <el-table ref="tableHeaderRef" :data="allHeader" @selection-change="headerChange" stripe border :cell-style="{textAlign: 'center'}" row-key="label"
                      :header-cell-style="{textAlign: 'center', background: 'var(--el-color-primary-light-9)', color: 'var(--next-bg-menuBar-light-1)'}">
                <el-table-column type="selection" width="90"/>
                <el-table-column label="表头名称" prop="name"/>
            </el-table>
            <template #footer>
                <el-button size="small" @click="headerVisible = false">关闭</el-button>
                <el-button size="small" type="primary" @click="submitHeader">保存</el-button>
            </template>
        </el-dialog>

        <!-- 签署对话框 -->
        <el-dialog title="签署/确认" v-model="signVisible" destroy-on-close width="40%" @close="headerVisible = false" top="5vh">

        </el-dialog>

        <!-- 采购单详情 -->
        <procure-detail v-model:dialogDrawer="detailVisible" v-model:form="detailData" v-model:dictMap="dictMap" @onSubmit="resetParams"/>
        <!-- 创建采购单 -->
        <purchase-order v-model:code="createVisible" v-model:edit-form="editData" @callback="formCallback"/>
    </div>
</template>

<script>
// 审批和签署单
import {onMounted, reactive, toRefs, ref} from 'vue'
import purchaseOrderApi from '/@/api/supplier/purchaseOrder'
import {getDictByCodes} from '/@/api/sys/dict'
import ProcureDetail from '/@/views/procure/components/ProcureDetail.vue'
import PurchaseOrder from '/@/views/matter/supplier/PurchaseOrder.vue'
import {formatThousand} from '/@/utils/common'
import {getPurchaseQuotes} from '/@/api/supplier/quoteOrder'
import {ElMessage} from 'element-plus'

export default {
    name: 'ApproveSignOrder',
    components: {
        ProcureDetail,
        PurchaseOrder
    },
    setup() {
        const tableHeaderRef = ref()
        const state = reactive({
            params: {
                current: 1,
                size: 10,
                valid: 0,
                approveState: null,     // 0待审批 1已审批
                dateType: 0,     // 0不筛时间 1今日的采购单 2昨日的采购单
                searchDate: [],
                shortName: null,
                orderNo: null,
                stage: null,
                source: null,
                type: null
            },
            tableData: [],
            total: 0,
            totalAmount: 0, // 全部采购单金额总额
            currentPageAmount: 0,   // 本页采购单金额总额
            stageData: [
                {
                    id: 0,
                    label: '当前数据',
                    approveNum: 0,
                    signNum: 0
                },
                {
                    id: 1,
                    label: '今日新增',
                    approveNum: 0,
                    signNum: 0
                },
                {
                    id: 2,
                    label: '昨日新增',
                    approveNum: 0,
                    signNum: 0
                }
            ],
            topOrderData: {
                yesterdayNum: 0,    // 昨日新增订单数
                todayNum: 0,        // 今日新增
                monthNum: 0,        // 本月订单数
                monthRefundNum: 0,  // 本月退款订单数
                yesterdayAmount: 0, // 昨日新增订单金额
                todayAmount: 0,     // 今日新增
                monthAmount: 0,     // 本月总金额
                monthRefundAmount: 0   // 本月退款金额
            },
            headerVisible: false,
            header: [],
            selectedHeader: [],
            allHeader: [{
                filter: 'search',
                isFilter: true,
                label: 'orderNo',
                name: '订单号/合同编号',
                width: '120',
                sort: 0
            }, {
                filter: 'search',
                isFilter: true,
                label: 'shortName',
                name: '供应商名称',
                width: '120',
                sort: 1
            }, {
                filter: '',
                isFilter: false,
                label: 'productName',
                name: '产品清单',
                width: '500',
                sort: 2
            }, {
                filter: '',
                isFilter: false,
                label: 'contractAmount',
                name: '订单总金额',
                width: '100',
                sort: 3
            }, {
                filter: '',
                isFilter: false,
                label: 'payableAmount',
                name: '应付金额',
                width: '100',
                sort: 4
            }, {
                filter: 'filter',
                isFilter: true,
                label: 'stage',
                name: '订单阶段',
                width: '100',
                sort: 5
            }, {
                filter: 'filter',
                isFilter: true,
                label: 'approveState',
                name: '审批状态',
                width: '90',
                sort: 6
            }, {
                filter: 'filter',
                isFilter: true,
                label: 'signState',
                name: '签署状态',
                width: '90',
                sort: 5
            }/*, {
                filter: 'filter',
                isFilter: true,
                label: 'paymentType',
                name: '结款方式',
                width: '90',
                sort: 5
            }, {
                filter: '',
                isFilter: false,
                label: 'orderDate',
                name: '下单日期',
                width: '100',
                sort: 6
            }, {
                filter: '',
                isFilter: false,
                label: 'predictDeliverDate',
                name: '预计交货日期',
                width: '100',
                sort: 7
            }, {
                filter: 'filter',
                isFilter: true,
                label: 'source',
                name: '采购渠道',
                width: '90',
                sort: 8
            }*/, {
                filter: 'filter',
                isFilter: true,
                label: 'source',
                name: '下单地点',
                width: '100',
                sort: 7
            }, {
                filter: 'filter',
                isFilter: true,
                label: 'type',
                name: '订单类别',
                width: '100',
                sort: 9
            }],
            filterData: {
                type: [{name: '个人', value: 0}, {name: '企业', value: 1}],
                source: [],
                stage: [],
                paymentType: [],
                approveState: [{name: '待审批', value: 0}, {name: '已审批', value: 1}],
                signState: [{name: '待签署', value: 0}, {name: '我方已签署', value: 0}, {name: '对方已签署', value: 1}, {name: '双方已签署', value: 2}]
            },
            detailVisible: false,
            detailData: {},
            dictMap: {},
            createVisible: '',
            editData: null,
            // 草稿箱
            draftParams: {
                current: 1,
                size: 10,
                draft: 1
            },
            draftTotal: 0,
            draftVisible: false,
            draftList: [],
            signVisible: false,
            signData: {
                purchaseOrderId: null,
                supplierInfoId: null,
                customerFileUrl: null,
                customerEvidence: null
            }
        })

        const resetParams = () => {
            state.params = {
                current: state.params.current,
                size: state.params.size,
                valid: 0,
                approveState: null,     // 0待审批 1已审批
                dateType: 0,     // 0不筛时间 1今日的采购单 2昨日的采购单
                searchDate: [],
                shortName: null,
                orderNo: null,
                stage: null,
                paymentType: null,
                source: null,
                type: null
            }
            getTableData()
        }
        /**
         * 点击阶段的数量对应查询条件
         * type -> 0待审批 1待签署
         */
        const stageNumSelect = (stage, type) => {
            if (stage.id === 0 || stage.id == state.params.dateType) {
                state.params.approveState = state.params.approveState == type && stage.id == state.params.dateType ? null : type
                state.params.dateType = 0
            } else {
                state.params.dateType = stage.id
                state.params.approveState = type
            }
            state.params.current = 1
            getTableData()
        }
        const sizeChange = (size) => {
            state.params.current = 1
            state.params.size = size
            getTableData()
        }
        const radioChange = (val, name) => {
            // 重复点击同个值取消选中
            state.params[name] = state.params[name] == val ? null : val
            getTableData()
        }
        // 打开采购单详情页
        const openDetail = (row) => {
            state.detailData = Object.assign({}, row)
            state.detailVisible = true
        }
        const getTableData = () => {
            purchaseOrderApi.newlyOrderPage(state.params).then(res => {
                state.tableData = res.data.records
                state.total = res.data.total
                state.currentPageAmount = 0
                state.tableData.forEach(item => state.currentPageAmount += item.contractAmount)
                state.currentPageAmount = state.currentPageAmount.toFixed(2)
            }).catch(e => console.log(e))
        }
        // 编辑
        const openEdit = (purchaseOrder) => {
            state.editData = Object.assign({}, purchaseOrder)
            // 获取关联的报价单列表
            getPurchaseQuotes(state.editData.id).then(res => {
                state.editData.quotationList = res.data
                state.createVisible = 'PURCHASE_ORDER'
            })
        }
        // 保存/关闭采购单后的回调
        const formCallback = () => {
            state.editData = null
            getTableData()
        }
        // 表头对话框的回调
        const dialogOpened = () => {
            state.header.forEach(item => {
                state.selectedHeader.push(item)
                tableHeaderRef.value.toggleRowSelection(item, true)
            })
        }
        const headerChange = (list) => {
            if (state.selectedHeader.length > list.length) {
                state.selectedHeader = list
            } else {
                const item = list[list.length - 1]
                state.selectedHeader.splice(item.sort, 0, item)
            }
        }
        // 保存表头数据
        const submitHeader = () => {
            purchaseOrderApi.saveHeader(0, state.selectedHeader).then(res => {
                state.header = Object.assign([], state.selectedHeader)
                state.headerVisible = false
                ElMessage.success('保存成功！')
            }).catch(e => console.log(e))
        }
        // 打开草稿箱
        const openDraft = () => {
            state.draftParams.current = 1
            state.draftParams.size = 10
            getDraftData()
            state.draftVisible = true
        }
        const draftSizeChange = (size) => {
            state.draftParams.size = size
            state.draftParams.current = 1
            getDraftData()
        }
        // 加载草稿分页数据
        const getDraftData = () => {
            purchaseOrderApi.getOrderPage(state.draftParams).then(res => {
                state.draftList = res.data.records
                state.draftTotal = res.data.total
            }).catch(e => console.log(e))
        }
        // 删除草稿
        const deleteDraft = (purchaseOrder) => {
            purchaseOrderApi.removeDraft(purchaseOrder).then(res => {
                if (res.data) {
                    ElMessage.success('删除成功！')
                    getDraftData()
                }
            }).catch(e => console.log(e))
        }
        // 订单生效
        const validOrder = (purchaseOrder) => {
            purchaseOrderApi.validOrder({id: purchaseOrder.id}).then(res => {
                if (res.data) {
                    getTableData()
                    ElMessage.success('订单已生效！')
                }
            }).catch(e => console.log(e))
        }
        // 订单取消 -> 已关闭 4
        const cancelOrder = (purchaseOrder) => {
            purchaseOrderApi.modifyStage({id: purchaseOrder.id, stage: '4'}).then(res => {
                if (res.data) {
                    getTableData()
                    ElMessage.success('订单已取消！')
                }
            }).catch(e => console.log(e))
        }
        // 签署/确认
        const openSign = (purchaseOrder) => {

        }

        onMounted(() => {
            // 获取表头字段
            purchaseOrderApi.getHeaders(0).then(res => {
                if (res.data && res.data.length > 0) {
                    state.header = []
                    res.data.forEach(item => {
                        for (let i = 0; i < state.allHeader.length; i++) {
                            let headerItem = state.allHeader[i]
                            if (item.label == headerItem.label) {
                                state.header.push(headerItem)
                            }
                        }
                    })
                } else {
                    state.header = state.allHeader
                }
            }).catch(e => console.log(e))

            // 阶段统计数据
            purchaseOrderApi.getApproveSignStageData().then(res => {
                if (res.data) {
                    state.topOrderData = res.data
                    state.stageData[0].approveNum = res.data['allApproveNum'] || 0
                    state.stageData[0].signNum = res.data['allSignNum'] || 0
                    state.stageData[1].approveNum = res.data['todayApproveNum'] || 0
                    state.stageData[1].signNum = res.data['todaySignNum'] || 0
                    state.stageData[2].approveNum = res.data['yesterdayApproveNum'] || 0
                    state.stageData[2].signNum = res.data['yesterdaySignNum'] || 0
                    state.totalAmount = res.data.totalAmount.toFixed(2)
                }
            }).catch(e => console.log(e))

            // 先加载完字典再请求分页, 表格数据渲染需要字典数据
            getDictByCodes(['orderSourceType', 'OrderStage', 'PaymentType']).then(res => {
                state.filterData.paymentType = res.data['PaymentType']
                state.filterData.source = res.data['orderSourceType']
                state.filterData.stage = res.data['OrderStage']
                state.dictMap = res.data
                getTableData()
            }).catch(e => console.log(e))
        })

        return {
            tableHeaderRef,
            ...toRefs(state),
            stageNumSelect,
            sizeChange,
            getTableData,
            resetParams,
            openDetail,
            radioChange,
            formatThousand,
            formCallback,
            openEdit,
            dialogOpened,
            headerChange,
            submitHeader,
            openDraft,
            draftSizeChange,
            deleteDraft,
            getDraftData,
            validOrder,
            cancelOrder,
            openSign
        }
    }

}
</script>

<style scoped lang="scss">
.page-container {
    .tl-card {
        width: 35%;
        font-size: 16px;

        :deep(.el-col) {
            text-align: center;
            margin: 5px 0;
        }

        .selected-color {
            color: var(--el-color-primary);
        }
    }

    .tr-card {
        width: 63%;
        margin-left: 1%;
        font-size: 18px;

        :deep(.el-col) {
            text-align: center;
            margin: 5px 0;
        }
    }

    .table-box {
        background: #fff;
        margin-top: 10px;

        :deep(.el-table__header-wrapper .el-table__cell) {
            background: var(--el-color-primary-light-9);
            color: var(--next-bg-menuBar-light-1);
        }

        :deep(thead .cell) {
            display: flex;
            align-items: center;
            justify-content: center;
        }

        :deep(thead .el-icon) {
            margin-top: -2px;
            cursor: pointer;
        }

        .primary {
            cursor: pointer;
            color: var(--el-color-primary);
        }

        .table-list {
            border: 1px solid var(--el-table-border-color);
            border-bottom: none;

            :deep(thead .cell) {
                display: flex;
                align-items: center;
                justify-content: center;
            }

            :deep(thead th:last-child .cell) {
                justify-content: center;
            }

            :deep(thead .el-icon) {
                margin-top: -2px;
                cursor: pointer;
            }

            .primary {
                cursor: pointer;
                color: var(--el-color-primary);
            }

            :deep(.el-button) {
                margin-left: 0;
                margin-right: 12px;
            }

            :deep(.el-table__body td.el-table__cell) {
                border-right: 1px solid var(--el-border-color-light);
                padding: 0;

                &:last-child {
                    border-right: none;
                }
            }

            .order-row-item {
                width: 100%;

                :deep(.el-col) {
                    border-right: 1px solid var(--el-border-color-light);
                    text-align: center;
                    display: flex;
                    align-items: center;
                    justify-content: center;

                    &:last-child {
                        border-right: none;
                    }
                }
            }

            .order-border-none {
                :deep(.el-col) {
                    border: none;
                }
            }
        }

        .short {
            display: block;
            text-overflow: ellipsis;
            overflow: hidden;
            white-space: nowrap;
        }
    }
}
</style>
<style lang="scss">
.el-table__body .order-goods .cell {
    min-height: 70px;
    display: flex;
    align-items: stretch;
    padding: 0;
}
</style>
